<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑菜单</title>
  <link rel="stylesheet" href="../../static/layui/css/layui.css"/>
  <link rel="stylesheet" href="../../static/css/common.css"/>
</head>
<body class="body" style="padding: 30px 50px;">
<div id="app">
  <form class="layui-form" lay-filter="form">
    <input name="id" style="display: none">
    <div class="layui-form-item">
      <div class="layui-form-label">角色名称</div>
      <div class="layui-inline">
        <input type="text" name="roleName" lay-verify="required" class="layui-input layui-input-form" placeholder="请输入角色名称">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-form-label">角色代码</div>
      <div class="layui-inline">
        <input class="layui-input layui-input-form" lay-verify="required" name="roleCode" placeholder="请输入角色代码" :disabled="state.isAdmin">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-form-label">角色描述</div>
      <div class="layui-inline">
        <textarea class="layui-input layui-input-form layui-textarea-form" lay-verify="required" name="description" placeholder="请输入角色描述"></textarea>
      </div>
    </div>
    <div class="layui-form-item btn-div">
      <div class="layui-inline">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary btn-save" @click="cancel">取消</button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal btn-save" lay-submit lay-filter="form" @click="save">保存</button>
      </div>
    </div>
  </form>
</div>
</body>
<script src="../../static/layui/layui.js"></script>
<script src="../../static/js/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/vue3.js"></script>
<script src="../../static/js/common.js"></script>
<script>
  const app = {
    setup(){
      const state = Vue.reactive({
        isAdmin: false
      })

      const save = () => {
        Vue.nextTick(() => {
          const form = layui.form
          form.on('submit(form)', function (data) {
            post('/api/sys/role/edit', data.field).then(res => {
              if (res.success){
                successMsg(res.data)
                window.parent.getChild()
                cancel()
              } else {
                errorMsg(res.msg)
              }
            })
            return false
          })
        })
      }

      const cancel = () => {
        parent.layer.closeAll()
      }

      return {
        state,
        save,
        cancel
      }
    }
  }
  const vue = Vue.createApp(app).mount('#app')

  //  获取父页面的传值
  function getParentData(data) {
    vue.state.isAdmin = false
    if (data && data.id){
      vue.state.isAdmin = data.roleCode === 'ROLE_ADMIN'
      const form = layui.form
      form.val('form', data)
    }
  }
</script>
<style>

</style>
</html>